<%@ page language="java" contentType="text/html;charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="beans.*" %>
<%@page import="service.*" %>
<%@page import="java.util.*" %>
<%@page import="java.sql.*" %>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Dashboard</title>
  <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" />
  <style>
body {
	margin: 0;
	background-color: #f2f2f2;
	font-family: Arial, sans-serif;
}

#m {
	position: absolute;
	top: 17%;
	left: 0;
	right: 0;
	margin: 0 auto;
	border: 1px solid blue;
	width: 800px;
	padding: 5px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
	font-size: 40px;
	Opacity: 0.9;
}

label {
	display: inline-block;
	width: 280px;
	margin-bottom: 10px;
}

select {
	width: 500px;
	border-radius: 10px;
	padding: 16px;
	border: none;
	background-color: #f2f2f2;
	margin-bottom: 10px;
}

input[type="date"]{
	width: 470px;
	border-radius: 10px;
	padding: 16px;
	border: none;
	background-color: #f2f2f2;
	margin-bottom: 10px;
}

input[type="button"] {
	border: none;
	background-color: #4CAF50;
	color: #fff;
	padding: 10px 20px;
	border-radius: 10px;
	cursor: pointer;
	margin-right: 10px;
}

input[type="button"]:hover {
	background-color: #3e8e41;
}

input[type="button"]:last-child {
	background-color: #f44336;
}

input[type="button"]:last-child:hover {
	background-color: #d32f2f;
}

body {
	overflow-x: hidden;
}

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}

#top {
	padding-top: 10px;
	padding-left: 10px;
	width: auto !important;;
	background-color: #0c9146;
	color: aliceblue;
	font-size: 20px;
	vertical-align: middle;
	padding-bottom: 10px;
	padding-left: 20px;
}

</style>
<%
	ksService ksService= new ksService();
	List <ksBean> list=ksService.browse();
	%>
</head>
		<form action="../Main" id="m">
			<label>选择科室：</label> <select id="ks" onclick="ksSelect()">
				<option value="-1" style="display: none;"></option>
				<% for(int i=0; i<list.size(); i++) {%>
    			<option value=<%= list.get(i).getName() %>><%=list.get(i).getName() %></option>
  				<%} %>
			</select><br> 
			<label>选择医生：</label> <select id="doctor" onclick="doctorSelect()">
				<option value="-1" style="display: none;"></option>
			</select><br> 
			<label>分配门诊：</label> 
			<select id="mz" onclick="mzSelect()">
				<option value="-1" style="display: none;"></option>
			</select><br> 
			<label>设置日期：</label> <input type="date" id="date" name="date"><br> 
			<label>设置时间：</label> 
			<select id="time">
				<option value="-1" style="display: none;"></option>
				<option value="100">上午</option>
				<option value="010">下午</option>
				<option value="001">晚上</option>
			</select><br> 
			<label>设置挂号总数：</label>
			<select id="sum">
				<option value="-1" style="display: none;"></option>
			</select><br>
			<input type="hidden" name="action" value="adddoctorScheduling"/> <br/>
			<input type="button" value="添加" onclick="submit()">
			<input type="button" value="重置" onclick="reset()">
		</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	var sum = document.getElementById("sum");
	for(var i=1;i<=100;i++){
		var option = document.createElement('option');
		option.innerHTML = i;
		option.value = i;
		sum.appendChild(option); 
	}
	var today = new Date();
	  today.setDate(today.getDate() + 1);  // 获取明天的日期
	  var dd = String(today.getDate()).padStart(2, '0');
	  var mm = String(today.getMonth() + 1).padStart(2, '0');  // 一月是 0
	  var yyyy = today.getFullYear();

	  var minDate = yyyy + '-' + mm + '-' + dd;
	  var dateInput = document.getElementById("date");
	  dateInput.min = minDate;
	function ksSelect() {
		var ks = document.getElementById("ks");
		var doctor = document.getElementById("doctor");
		 var mz = document.getElementById("mz");
		  for (var i = mz.children.length - 1; i > 0; i--) {
		    mz.removeChild(mz.children[i]);
		  }
		  for (var i = doctor.children.length - 1; i > 0; i--) {
		    doctor.removeChild(doctor.children[i]);
		  } 
	}
	function doctorSelect() {
		var ks = document.getElementById("ks");
		  var doctor = document.getElementById("doctor");
		  var mz = document.getElementById("mz");
		  for (var i = doctor.children.length - 1; i > 0; i--) {
			    doctor.removeChild(doctor.children[i]);
		 }
		  let res=$.ajax({
			  url:"http://localhost:8080/work3/Main",
			  type: "GET",
			  data: {
				  ks: ks.value,
				  action: "getdoctors"
			  },
			  async: false,
			  dataType: "text",
			  error: (err)=> {
				  console.log(err);
			  }
		  }) 
		  
	}
		function submit(){
			var m = document.getElementById("m");
			var ks = document.getElementById("ks");
			var doctor = document.getElementById("doctor");
			var mz = document.getElementById("mz");
			var date = document.getElementById("date");
			var time = document.getElementById("time");
			var sum = document.getElementById("sum");
			if(ks.value=="-1"||doctor.value=="-1"||mz.value=="-1"||date.value==""||time.value=="-1"||sum.value=="-1"){
				alert("请填写完整信息");
			}else{
				m.submit();
			}
		}
		function reset(){
			var m = document.getElementById("m");
			m.reset();
		}	
	
</script>
  </body>
</html>